<script setup>
defineProps({
  title: {
    type: String,
    default: '',
  },
  content: {
    type: String,
    default: '',
  },
})
</script>

<template>
  <view class="content-box">
    <view
      v-if="title"
      class="content-box-title"
    >
      {{ title }}
    </view>
    <template>
      <view
        v-if="content"
        class="content-box-content"
      >
        {{ content }}
      </view>
      <slot v-else />
    </template>
  </view>
</template>

<style lang="scss" scoped>
.content-box {
  padding: 32rpx;
  background: #fff;
  border-radius: 16rpx;

  &-title {
    position: relative;
    padding-left: 24rpx;
    margin-bottom: 32rpx;
    font-size: 32rpx;
    font-weight: 500;
    color: $uni-text-color;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 8rpx;
      height: 32rpx;
      background-image: linear-gradient(
        169deg,
        #67bdf6 0%,
        #2c84db 100%
      );
      border-radius: 2rpx;
    }
  }

  &-content {
    font-size: 28rpx;
    color: $uni-text-color;
  }
}
</style>
